<template>
	<!-- 购物车 -->
	<view class="pageV">
		<u-navbar title="购物车" placeholder :autoBack="true" leftIconColor="#E6A5B4" bgColor="#000000"
			:titleStyle="titleStyle">
		</u-navbar>
		<view class="itemV">
			<view class="itemVV">
				<!-- <view class="itemTitle">
					<image class="itemTitleIv" src="../../static/shop_shop.svg"></image>
					<view class="itemTitleTv">标题</view>
					<u-icon name="arrow-right" color="#939393" size="13"></u-icon>
				</view> -->
				<u-swipe-action>
					<u-swipe-action-item :options="options1" v-for="(item,index) in listData" :key="index"
						@click="onDelete(item)">
						<view class="shopItemV">
							<image class="shopItemIv" @click="onSeleteClick(item)"
								:src="item.isset?'../../static/select_.svg':'../../static/select.svg'">
							</image>
							<view class="shopItemRightV">
								<image class="shopItemRightIv" :src="item.image"></image>
								<view class="shopItemRightVV">
									<view class="shopItemRightTv1">{{item.title}}</view>
									<view class="shopItemMoneyV">
										<view class="shopItemRightTv2">
											¥{{item.sales_price*item.number}}
										</view>
										
											<u-number-box v-model="item.number">
											
												<view slot="minus" class="minus">
													<u-icon name="minus" size="12" color="#fff"></u-icon>
												</view>
												<text slot="input" class="input">{{item.number}}</text>
												<view slot="plus" class="plus">
													<u-icon name="plus" size="12" color="#fff"></u-icon>
												</view>
											
											</u-number-box>
									</view>
								</view>
							</view>
						</view>
					</u-swipe-action-item>
				</u-swipe-action>
			</view>
		</view>
		<view class="bottomV">
			<view class="seleteV" @click="onAllSeleteClick()">
				<image class="seleteIv" :src="isALL?'../../static/select_.svg':'../../static/select.svg'"></image>
				<view class="seleteTv">全选</view>
			</view>
			<view class="hejiV">
				<view class="hejiTv1">合计</view>
				<view class="hejiTv2">¥{{mMoney}}</view>
			</view>
			<view v-if="isSave" class="jiesuanVTo" @click="onSaveClick()">
				去结算
			</view>
			<view v-else class="jiesuanV">
				去结算
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#ffffff"
				},
				options1: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
				listData: [],
				isALL: false,//是否全选
				isSave:false,//是否可以提交
				mMoney: 0
			}
		},
		onLoad() {
			this.getShopCartList();
		},
		methods: {
			getShopCartList() {
				this.$api.getShopCartList({

				}).then((res) => {
					this.listData = res;
					this.onIsAllSelete();
				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "获取数据失败" : e.msg)
				})
			},
			onSeleteClick(item) {
				let is = item.isset;
				item.isset = !is;
				this.onIsAllSelete();
			},
			onIsAllSelete() { //判断是否全部选中 及是否有选中的
				let isAllSelete = true;
				let isSele = false;
				this.listData.map((item, index) => {
					if (!item.isset) {
						isAllSelete = false
					}
					if (item.isset) {
						isSele = true
					}
				})
				this.isALL = isAllSelete;
				this.isSave = isSele;
				this.onHeJi();
			},
			onAllSeleteClick() { //全选
				this.listData.map((item, index) => {
					item.isset = true;
					return item;
				})
				this.onIsAllSelete();
			},
			onInput(e){
				console.log("--11--",e);
				this.onHeJi();
			},
			onChange(e) { //数量
			console.log("--22--",e);
				
			},
			onHeJi() {
				let money = 0;
				this.listData.map((item, index) => {
					if (item.isset) {
						money = money + (item.sales_price * item.number)
					}
				})
				this.mMoney = money;
			},
			onDelete(item) {
				uni.showLoading({
					title: "请稍后"
				})
				this.$api.getShopCartDelete({
					id: item.cart_id
				}).then((res) => {
					uni.hideLoading();
					this.getShopCartList();
				}).catch((e) => {
					uni.hideLoading();
					uni.$u.toast(e.msg === undefined ? "删除失败" : e.msg)
				})
			},
			onSaveClick(){
				let cart = [];
				this.listData.map((item, index) => {
					if (item.isset) {
						cart.push(item.cart_id)
					}
				})
				
				this.$api.getShopOrderCreate({
					cart: cart.join(","),
				}).then((res) => {
					this.$u.route({
						url: "/shop/commodity/settlementTo",
						params: {
							list:JSON.stringify(this.listData)
						}
					})
				}).catch((e) => {
					uni.$u.toast(e.msg === undefined ? "创建订单失败" : e.msg)
				})
			}
		}
	}
</script>

<style lang="scss">
	$u-numberBox-disabled-bgColor: #939393 !important;

	.pageV {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		width: 100%;
	}

	.itemV {
		flex: 1;
		padding-bottom: 120rpx;
	}

	.itemVV {
		width: 100%;
		display: flex;
		flex-direction: column;
		background-color: #383838;
	}

	.itemTitle {
		display: flex;
		align-items: center;
		padding-left: 85rpx;
		padding-top: 30rpx;
		padding-bottom: 15rpx;

		.itemTitleIv {
			width: 38rpx;
			height: 38rpx;
		}

		.itemTitleTv {
			font-size: 28rpx;
			color: #939393;
			margin-left: 10rpx;
			padding-right: 20rpx;
		}
	}

	.shopItemV {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 15rpx;
		padding-bottom: 30rpx;
		background-color: #383838;

		.shopItemIv {
			width: 35rpx;
			height: 35rpx;
			margin-left: 30rpx;
		}

		.shopItemRightV {
			flex: 1;
			display: flex;
			margin-left: 20rpx;

			.shopItemRightIv {
				width: 150rpx;
				min-width: 150rpx;
				height: 150rpx;
				background-color: #E6A5B4;
				border-radius: 10rpx;
			}

			.shopItemRightVV {
				width: 100%;
				margin-left: 20rpx;
				padding-right: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.shopItemRightTv1 {
					font-size: 28rpx;
					color: #F9F9F9;
				}

				.shopItemMoneyV {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.shopItemRightTv2 {
						font-size: 36rpx;
						color: #E6A5B4;
					}
				}
			}
		}
	}


	.bottomV {
		height: 98rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
		background-color: #FFFFFF;
		z-index: 999;
	}

	.seleteV {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-left: 30rpx;
		padding-right: 30rpx;

		.seleteIv {
			width: 35rpx;
			height: 35rpx;
		}

		.seleteTv {
			font-size: 28rpx;
			color: #939393;
			margin-left: 5rpx;
		}
	}

	.hejiV {
		display: flex;
		align-items: center;
		justify-content: center;

		.hejiTv1 {
			font-size: 28rpx;
			color: #939393;
		}

		.hejiTv2 {
			font-size: 36rpx;
			color: #E6A5B4;
		}
	}

	.jiesuanV {
		width: 320rpx;
		height: 98rpx;
		background: #939393;
		font-size: 32rpx;
		color: #333737;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.jiesuanVTo {
		width: 320rpx;
		height: 98rpx;
		background: #E6A5B4;
		font-size: 32rpx;
		color: #333737;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.minus {
		width: 40rpx;
		height: 50rpx;
		border-color: #E6E6E6;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border: 2rpx solid #939393;
	}
	
	.input {
		width: 80rpx;
		height: 50rpx;
		text-align: center;
		border-bottom: 2rpx solid #939393;
		border-top: 2rpx solid #939393;
		color: #fff;
		font-size: 32rpx;
	}
	
	.plus {
		width: 40rpx;
		height: 50rpx;
		border-color: #E6E6E6;
		border-top-right-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border: 2rpx solid #939393;
	}
</style>
